<template>
    <div class="page-main">
        <div class="page-main-left-tabs">
            <div
                class="page-main-left-tab"
                v-for="(item, index) in tabListManage"
                :key="item + ':manage'"
            >
                 <div class="page-main-left-tab-in" 
                :class="{active:index===clickIndex}"
                @click="clickButton(index, item)">
                    <div class="page-main-left-tab-in-padding" v-show="index===clickIndex"></div>
                    <span v-show="index===clickIndex">
                        <span class="page-main-left-tab-in-icon icon-1" v-show="clickName==='敏感词管理'"></span>
                    </span>
                    <span v-show="index!==clickIndex">
                        <span class="page-main-left-tab-in-icon icon-1-gray" v-show="item==='敏感词管理'"></span>
                    </span>
                    {{item}}
                </div>
            </div>
        </div>
        <div class="page-main-mid-line"></div>
        <div class="page-main-right-wrapper">
            <div v-if="clickName==='敏感词管理'">
                <k-t-v-manage></k-t-v-manage>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import KTVManage from '../page_main_components/page_main_8_business/page_1_KTV_manage.vue'
export default {
    data: function () {
        return {
            clickIndex: 0,
            clickName: '',
            tabListManage: [
                '敏感词管理'
            ]
        }
    },
    created () {
        this.clickName = this.tabListManage[0]
    },
    watch: {
    },
    methods: {
        clickButton (index, item) {
            this.clickIndex = index
            this.clickName = item
            this.$store.dispatch('setAP', 0)
        }
    },
    computed: {
    },
    components: {
        KTVManage
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.page-main
    width: 100%
    min-height: calc(100vh - 65px)
    display: flex
    flex-flow: row nowrap
    justify-content: flex-start
    align-content: flex-start
    border-top 1px solid #f1f0f5

    .page-main-left-tabs
        flex: 0 0 182px
        min-height: calc(100vh - 65px)
        background: #fff

        .page-main-left-tab
            line-height: 56px
            width: 182px
            height: 56px
            background: #fff
            color: #595959
            font-size: 14px
            cursor: pointer
            position relative
            .page-main-left-tab-in
                position absolute
                left 0
                bottom 0
                height 42px
                width 100%
                line-height 42px
                &.active
                    background: #e6f7ff
                    color #409EFF
                &:hover
                    background: #f6f6f6
                .page-main-left-tab-in-padding
                    position absolute
                    height 42px
                    width 3px
                    left 0
                    top 0
                    background #409EFF
                    z-index 10
                .page-main-left-tab-in-icon
                    width 20px
                    height 20px
                    display inline-block
                    vertical-align middle
                    margin-left 20px
                    background-size cover
                    &.icon-1
                        background-image url('../../common/pic/icons_8_business/icon_1.png')
                    &.icon-2
                        background-image url('../../common/pic/icons_8_business/icon_2.png')
                    &.icon-3
                        background-image url('../../common/pic/icons_8_business/icon_3.png')
                    &.icon-4
                        background-image url('../../common/pic/icons_8_business/icon_4.png')
                    &.icon-5
                        background-image url('../../common/pic/icons_8_business/icon_5.png')
                    &.icon-6
                        background-image url('../../common/pic/icons_8_business/icon_6.png')
                    &.icon-7
                        background-image url('../../common/pic/icons_8_business/icon_7.png')
                    &.icon-1-gray
                        background-image url('../../common/pic/icons_8_business/icon_1_gray.png')
                    &.icon-2-gray
                        background-image url('../../common/pic/icons_8_business/icon_2_gray.png')
                    &.icon-3-gray
                        background-image url('../../common/pic/icons_8_business/icon_3_gray.png')
                    &.icon-4-gray
                        background-image url('../../common/pic/icons_8_business/icon_4_gray.png')
                    &.icon-5-gray
                        background-image url('../../common/pic/icons_8_business/icon_5_gray.png')
                    &.icon-6-gray
                        background-image url('../../common/pic/icons_8_business/icon_6_gray.png')
                    &.icon-7-gray
                        background-image url('../../common/pic/icons_8_business/icon_7_gray.png')
    .page-main-mid-line
        flex: 0 0 1px
        min-height: calc(100vh - 65px)
        background #f1f0f5

    .page-main-other-padding
        flex: 0 0 20px
        min-height: calc(100vh - 65px)
        background #f1f0f5

    .page-main-right-wrapper
        flex: 1
        overflow-x: hidden
        // min-height: calc(100vh - 65px)
        height: calc(100vh - 65px)
        background #f1f0f5
        overflow-y: auto
        overflow-x: hidden
        padding 0 22px
        box-sizing border-box
</style>
